<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shandow="never" class>
        <!-- 目录管理 -->
        <el-row class="nav-breadcrumb" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <div class="body-box">
          <el-row class="directorys-sel-row">
            <el-form
              :model="directorysForm"
              label-position="left"
              label-width="80px"
              :inline="true"
            >
              <el-form-item label="目录名称">
                <el-input v-model="directorysForm.directoryName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="directorysForm.state">
                  <el-option
                    v-for="(item, index) in status"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="button-box">
                <el-button @click="clearSearch">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
              <div class="add-btn">
                <el-button
                  type="text"
                  v-if="$route.query.id"
                  @click="$router.push('/subjects/list')"
                  >⬅返回学科</el-button
                >
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="showAddDialog"
                  >新增目录</el-button
                >
              </div>
            </el-form>
          </el-row>
          <el-row class="tips">
            <el-alert
              :title="'数据一共' + total + '条'"
              type="info"
              show-icon
              :closable="false"
            ></el-alert>
          </el-row>
          <el-table :data="directorysTable" stripe class="directorys-table">
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="80px"
            ></el-table-column>
            <el-table-column
              align="center"
              label="所属学科"
              prop="subjectName"
              width="120px"
            ></el-table-column>
            <el-table-column
              align="center"
              label="目录名称"
              prop="directoryName"
              width="120px"
            ></el-table-column>
            <el-table-column
              align="center"
              label="创建者"
              prop="username"
            ></el-table-column>
            <el-table-column align="center" label="创建日期" prop="addDate">
              <template slot-scope="scope">{{
                scope.row.addDate | parseTimeByString
              }}</template>
            </el-table-column>
            <el-table-column
              align="center"
              label="面试题数量"
              prop="totals"
              width="120px"
            ></el-table-column>
            <el-table-column
              align="center"
              label="状态"
              prop="state"
              width="80px"
            >
              <template slot-scope="scope">{{
                scope.row.state ? '已启用' : '已禁用'
              }}</template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="changeState(scope.row)">{{
                  scope.row.state ? '禁用' : '启用'
                }}</el-button>
                <el-button
                  type="text"
                  :disabled="scope.row.state ? true : false"
                  @click="doEdit(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.state ? true : false"
                  @click="delDirectory(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-row class="page-set">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 6, 8, 10]"
              background
              :page-size="requestParams.pagesize"
              :current-page.sync="requestParams.page"
              layout="prev, pager, next,sizes, jumper"
              :total="total - 0"
            ></el-pagination>
          </el-row>
        </div>
      </el-card>
      <!-- 对话框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :title="title"
        @close="editParams = {}"
      >
        <directorys-add
          v-if="dialogVisible"
          :editParams="editParams"
          :id="id"
          name="name"
          @close-dialog="doneControl"
        ></directorys-add>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add'
export default {
  components: { DirectorysAdd },
  data() {
    return {
      directorysForm: {
        directoryName: null,
        state: null
      },
      status,
      total: '',
      requestParams: {
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      directorysTable: [],
      dialogVisible: false,
      // 修改目录对话框传参
      editParams: {},
      name: this.$route.query.name,
      title: ''
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  watch: {
    id(id) {
      this.requestParams.subjectID = null
      this.getDirectorys()
    }
  },
  created() {
    // 获取表格数据
    this.getDirectorys()
  },
  methods: {
    async getDirectorys() {
      try {
        if (this.id) {
          this.requestParams.subjectID = this.id
        }
        const { data: res } = await list(this.requestParams)
        console.log(res)
        this.directorysTable = res.items
        this.total = res.counts
      } catch (err) {
        console.log(err)
        this.$toast.fail('$')
      }
    },
    handleSizeChange(val) {
      this.requestParams.pagesize = val
      this.getDirectorys()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.requestParams.page = val
      this.getDirectorys()
    },
    clearSearch() {
      // 清除表单
      this.directorysForm.directoryName = null
      this.directorysForm.state = null
      this.requestParams.directoryName = null
      this.requestParams.state = null
      this.getDirectorys()
    },
    search() {
      // 搜索
      if (!this.directorysForm.directoryName && !this.directorysForm.state) return
      this.requestParams = { ...this.requestParams, ...this.directorysForm }
      this.getDirectorys()
    },
    changeState(item) {
      // 改变状态
      this.$confirm(`确认操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await changeState({
            id: item.id,
            state: Number(!item.state)
          })
          console.log(res)
          item.state = !item.state
          return this.$message.success('操作成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    showAddDialog() {
      // 新增
      this.dialogVisible = true
      this.title = '新增目录'
    },
    doEdit(item) {
      this.dialogVisible = true
      // 修改
      this.editParams = item
      this.title = '修改目录'
    },
    delDirectory(item) {
      // 删除
      this.$confirm(`确认删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await remove({
            id: item.id
          })
          console.log(res)
          this.getDirectorys()
          return this.$message.success('操作成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    doneControl() {
      // 关闭对话框
      this.dialogVisible = false
      // 刷新列表
      this.getDirectorys()
    }
  }
}
</script>

<style scoped lang="scss">
.el-card__body {
  padding-top: 20px;
}
.directorys-sel-row {
  .button-box {
    width: 35%;
    .el-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px;
      height: 36px;
      margin-left: 15px;
      font-size: 12px;
      float: left;
    }
  }
  .add-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    .el-button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      width: 100px;
      font-size: 12px;
    }
  }
}
.tips {
  height: 32px;
}
.directorys-table {
  margin-top: 20px;
  overflow: hidden;
}
.page-set {
  margin-top: 20px;
  .el-pagination {
    float: right;
  }
}
.nav-breadcrumb {
  padding: 20px 10px 20px;
  border-bottom: 1px solid #ebeef5;
}
.app-container {
  ::v-deep.el-card__body {
    padding: 0;
  }
  .body-box {
    padding: 20px;
  }
}
</style>
